<template>
	<Row :gutter="20">
		<Col span="12">
			<div class="pay-card-box">
				<div class="header">
					<h3>小折云支付</h3>
					<Tag color="success">使用中</Tag>
					<iSwitch size="large">
				        <span slot="open">开启</span>
				        <span slot="close">关闭</span>
				    </iSwitch>
				</div>
				<Divider orientation="left">说明</Divider>
				<div class="desc">
					<p>小折云支付包含了微信支付、支付宝、京东三种支付方式，根据不同的产品版本，收取不同的手续费</p>
				</div>
			</div>
		</Col>
		<Col span="12">
			<div class="pay-card-box">
				<div class="header">
					<h3>支付宝</h3>
					<Button type="primary" size="small" shape="circle" @click="handleGoEdit('setup_pay_alipay')">配置并启用</Button>
				</div>
				<Divider orientation="left">说明</Divider>
				<div class="desc">
					<p>配置支付宝支付方式，只有企业版才可配置使用，可使用独立支付宝支付接口，非企业版请使用小折云支付</p>
				</div>
			</div>
		</Col>
		<Col span="12">
			<div class="pay-card-box">
				<div class="header">
					<h3>微信支付</h3>
					<Button type="primary" size="small" shape="circle" @click="handleGoEdit('setup_pay_wechat')">配置并启用</Button>
				</div>
				<Divider orientation="left">说明</Divider>
				<div class="desc">
					<p>配置微信支付方式，只有企业版才可配置使用，可使用独立支付宝支付接口，非企业版请使用小折云支付</p>
				</div>
			</div>
		</Col>
		<Col span="12">
			<div class="pay-card-box">
				<div class="header">
					<h3>京东钱包</h3>
					<Button type="primary" size="small" shape="circle" @click="handleGoEdit('setup_pay_jd')">配置并启用</Button>
				</div>
				<Divider orientation="left">说明</Divider>
				<div class="desc">
					<p>配置京东钱包支付方式，只有企业版才可配置使用，可使用独立支付宝支付接口，非企业版请使用小折云支付</p>
				</div>
			</div>
		</Col>
	</Row>
</template>

<script>
export default {
	name: 'pay',
	methods: {
		handleGoEdit(name) {
			this.$router.push({name: name});
		}
	}
}
</script>

<style lang="less">
.pay-card-box {
	margin-bottom: 20px;
	height: 152px;
	border: 1px solid #f0f0f0;
    border-radius: 5px;
    .header {
    	padding: 20px 15px 5px;
    	.ivu-switch {
    		float: right;
    		margin-top: 2px;
    	}
    	.ivu-btn {
    		float: right;
    	}
    	h3 {
    		display: inline-block;
		    margin-right: 5px;
		    font-size: 16px;
		    color: #000;
		    vertical-align: middle;
    	}
    }
    .desc {
    	margin-top: -10px;
    	padding: 0 25px 20px;
    }
}
</style>